<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="conic"></div>
		<div class="conic all"></div>
		<div class="rect"></div>
	</body>
	<style>
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #000;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		@keyframes rotate {
			100% {
				transform: rotate(-1turn);
			}
		}

        /* 
        - 先做一层角向渐变图形  并添加一份模糊滤镜
        - 其上面叠加一个小一点点的圆形，设置为黑底，就能把中间部分隐藏起来，这样就巧妙地得到了渐变色阴影
        */
		.conic {
			position: relative;
			width: 300px;
			height: 300px;
			flex-shrink: 0;
			border-radius: 10px;
			border-radius: 50%;
			background: #000;
			margin: 50px;
			&::before,
			&::after {
				content: "";
				position: absolute;
				left: -6px;
				top: -6px;
				width: calc(100% + 12px);
				height: calc(100% + 12px);
				background: #333;
				border-radius: 50%;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-image: conic-gradient(
					transparent,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					transparent 20%,
					transparent 100%
				);
				animation: rotate 4s linear infinite;
				z-index: -1;
			}

			&::after {
				background: none;

				background-image: conic-gradient(
					transparent,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					transparent 20%,
					transparent 100%
				);
				filter: blur(10px);
			}
		}

		.all {
			&::before,
			&::after {
				content: "";
				position: absolute;
				left: -6px;
				top: -6px;
				width: calc(100% + 12px);
				height: calc(100% + 12px);
				background: #333;
				border-radius: 50%;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-image: conic-gradient(
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff
				);
				animation: rotate 4s linear infinite;
				z-index: -1;
			}

			&::after {
				background: none;
				background-image: conic-gradient(
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff
				);
				filter: blur(10px);
			}
		}

		.rect {
			position: relative;
			width: 300px;
			height: 300px;
			flex-shrink: 0;
			background: #000;
			margin: 50px;
			overflow: unset;

			&::before,
			&::after {
				content: "";
				position: absolute;
				left: -6px;
				top: -6px;
				width: calc(100% + 12px);
				height: calc(100% + 12px);
				background: #333;
				background-image: linear-gradient(
					45deg,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff,
					#ff3c41,
					#ff8a25,
					#ffe04f,
					#4fff88,
					#56ffef,
					#37b4ff,
					#c05aff
				);
				background-size: 500%;
				animation: position 12s linear infinite alternate;
				z-index: -1;
			}

			&::after {
				filter: blur(10px);
			}
		}

		@keyframes position {
			0% {
				background-position: 0 0;
			}
			50% {
				background-position: 400% 0;
			}
			100% {
				background-position: 0 0;
			}
		}
	</style>
</html>
